<template>
    <div id="app">
        <Header class="header"></Header>
        <div class="container">
            <div class="page-main">
                <router-view/>
            </div>
        </div>
        <Footer class="footer"></Footer>
    </div>
</template>

<script>
    import Header from 'cmpts/Header';
    import Footer from 'cmpts/Footer';
    export default {
        name: 'App',
        components: {
            Header,
            Footer
        }
    };
</script>

<style lang="less">
@import 'assets/styles/index';
@import 'assets/styles/variable';
html,body,#app{
    height: 100%;
}
#app {
    display: flex;
    flex-direction: column;
    height: 100%;
    .header, .footer{
        flex-shrink: 0;
    }
    .container{
        position: relative;
        flex-grow: 1;
        background-color: @color-background;
        overflow: hidden;
        .page-main {
            height: 100%;
            padding-bottom: 20px;
            overflow-x: hidden;
        }
        .mainBody{
            width: 90%;
            margin: 0 auto;
        }
    }
}
</style>
